<script setup>
import { storeToRefs } from 'pinia';
import { useGlobalStore } from '@/stores/golbal'
let { topMenuList, topMenuIndex} = storeToRefs(useGlobalStore())

// 点击顶部菜单
const topMenuIndexChange = (index) => {
    topMenuIndex.value = index
}

</script>
<template>
    <div class="header-bottom-menu-bar-content">
        <div class="header-bottom-menu-bar" v-for="(item,index) in topMenuList" @click="topMenuIndexChange(index)" :key="item.id">
            <div :class="{ active: topMenuIndex === index }">{{ item.name }}</div>
        </div>
    </div>

</template>



<style lang="scss" scoped>
.header-bottom-menu-bar-content {
    position: absolute;
    bottom: -68%;
    left: 3%;
    display: flex;
    justify-content: space-evenly;
    width: 50%;
}
.header-bottom-menu-bar{
    margin-right: 5%;
    font-size: var(--szc-font-main-small);
    font-weight: normal;
    color: #FFF;

}
.active{
    color: #fe6638;
    font-weight: 700;
    transition: color 0.3s;
    
}
</style>